<template>
  <div id="preview-test-paper">
    <div class="preview-top">
      <div class="preview-title">期中考试</div>
      <div class="preview-text">
        <span>总分数：80分</span>
        <span>考试时间：90分钟</span>
      </div>
    </div>
    <div class="jx-content preview-content">
      <div class="c-red">提示：学生作答时，每个学生的答题类型的答题顺序相同，每个类型中答题的顺序不相同。</div>
      <h2 class="tq-title">一、选择题(每题10分，共10题)</h2>
      <dl v-for="(item,index) in data" :key="item">
        <dt>
          {{ index+1 }}.{{ item.title }} (&nbsp;&nbsp;&nbsp;&nbsp;) ({{ item.score }}分)
        </dt>
        <dd v-for="(score,indexKey) in item.key" :key="score">{{ qKey[indexKey] + '. ' + score }}</dd>
      </dl>
      <div class="btn-group">
        <div class="button-style">保存</div>
        <div class="button-style">下载</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      qKey: ["A", "B", "C", "D"],
      data: [
        {
          //标题
          title: "以下属于大数据发展原动力的选项有：",
          //选项
          key: [
            "硬件技术的发展",
            "电子数据激增",
            "数据潜在的经济价值",
            "国内国际政策法规的推动"
          ],
          //学生答案
          studentKey: "BC",
          //正确答案
          rightKey: "ABCD",
          //分数
          score: 10
        },
        {
          title: "以下属于大数据的作用与意义的选项有：",
          key: [
            "改变经济社会管理方式",
            "促进行业融合发展",
            "推动产业转型升级",
            "助力智慧城市建设"
          ],
          studentKey: "BC",
          rightKey: "AD",
          score: 10
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {}
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#preview-test-paper {
  background: #f8f8f8;
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  .c-blue {
    color: $blue;
  }
  .c-btnblue {
    color: $btn-blue;
  }
  .c-red {
    color: #ff4240;
  }
  .preview-top {
    width: 1200px;
    height: 335px;
    margin: 20px auto 0;
    text-align: center;
    box-sizing: border-box;
    padding-top: 74px;
    color: #fff;
    background: #fff url("../../../assets/images/previewTestPaper-bg.png")
      no-repeat 0 0;
    background-size: contain;
    .preview-title {
      font-size: 40px;
    }
    .preview-text {
      font-size: 18px;
      margin-top: 16px;
      > span {
        margin: 0 5px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 0px auto 20px;
    color: $title-gray;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      line-height: 30px;
    }
    dd {
      padding-left: 20px;
    }
    .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
  }
}
</style>
